<template>
	<view class="container">
		<map class="map" :polyline="polyline" :markers="covers" :latitude="latitude" :longitude="longitude"
			:show-location="true" :include-points="includePoints" />

		<view class="content">
			<view class="flex justify-between align-center">
				<view class="title">{{shopName}}</view>
				<view class="distance">{{distance}}</view>
			</view>

			<view class="addr">{{address}}</view>

			<!-- <view class="navigation" @tap="showModal = true">导航</view> -->
			<view class="navigation" @tap="openApp">导航</view>

			<view class="reLocation" @tap="getLocation">
				<view class="img-bg"
					:style="{background: `url()`}">
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
			<!-- 规格 -->
			<view class="cu-modal bottom-modal" :class="showModal ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog fixedView" @tap.stop="" style="transform: translateX(-50%);">
					<view class="option wanl-modal">
						<view class="head text-left align-start" style="gap: 20rpx;">
							<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
						</view>

						<view class="map-list">
							<view class="item" @tap="openApp(item)" v-for="item in app_map" :key="item">{{item}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 目标位置名称
				shopName: '',
				// 路线距离
				distance: '0m',
				// 目标地址
				address: '',
				// 当前位置
				latitude: 39.904179,
				longitude: 116.407387,
				// 起点位置
				start_latitude: 0,
				start_longitude: 0,
				// 终点位置
				end_latitude: 0,
				end_longitude: 0,
				// 规划路线
				polyline: [],
				// 缩放视野以包含所有给定的坐标点
				includePoints: [],
				// 选择导航地图
				app_map: ['高德地图'],
				showModal: false,
			};
		},
		computed: {
			covers() {
				return [{
					id: 1,
					latitude: this.start_latitude,
					longitude: this.start_longitude,
					iconPath: '/static/images/tabbar/open.png',
					title: '起点',
					width: 40, // 60 * 2 / 3
					height: 47 // 70 * 2 / 3
				}, {
					id: 2,
					latitude: this.end_latitude,
					longitude: this.end_longitude,
					iconPath: '/static/images/tabbar/sucess.png',
					title: '终点',
					width: 40,
					height: 40
				}]
			}
		},
		onLoad(option) {
			this.shopName = option.name;
			this.address = option.addr;
			// 获取终点坐标信息
			this.end_latitude = Number(option.latitude);
			this.end_longitude = Number(option.longitude);
			this.getLocation();
			console.log('option', option)
		},
		onShow() {
			this.getLocation();
		},
		methods: {
			// 获取当前位置
			async getLocation() {
				let res = await this.$wanlshop.location();
				if (res.code === 1) {
					res = res.data;
					// 取出坐标点
					// console.log('res', res)
					let arr = res.address.streetNumber.location.split(',');
					this.longitude = arr[0];
					this.latitude = arr[1];
					// 获取路线规划
					this.getDriverLine();
					this.includePoints = [
						{
							longitude: arr[0],
							latitude: arr[1]
						},
						{
							longitude: this.end_longitude,
							latitude: this.end_latitude
						}
					];
					console.log('刷新')
				}
			},
			// 路线规划，调用高德地图的api实现规划路线的功能。
			getDriverLine() {
				const that = this;
				//这个key是在高德导航app上申请的web路线规划
				const key = this.$wanlshop.config('amapkey');
				//起点坐标
				const origin = [this.longitude, this.latitude].join(',');
				//终点坐标
				const destination = [this.end_longitude, this.end_latitude].join(',');
				// 驾车选择策略 - 距离优先
				const strategy = 2;
				//给起点坐标一个图标
				// this.startingPoint()
				//给终点坐标一个图标
				// this.endPoint()
				uni.request({
					url: `https://restapi.amap.com/v3/direction/driving?origin=${origin}&destination=${destination}&strategy=${strategy}&key=${key}`,
					success: (res) => {
						console.log('路线规划', res);
						const data = res.data.route;
						var points = [];

						// 设置起点坐标
						that.start_longitude = parseFloat(data.origin.split(",")[0]);
						that.start_latitude = parseFloat(data.origin.split(",")[1]);

						if (data.paths && data.paths[0] && data.paths[0].steps) {
							that.distance = that.$wanlshop.setMorKm(data.paths[0].distance);
							var steps = data.paths[0].steps;
							for (var i = 0; i < steps.length; i++) {
								//将每一步的数据放到points数组中
								var poLen = steps[i].polyline.split(";");
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(",")[0]),
										latitude: parseFloat(poLen[j].split(",")[1]),
									});
								}
							}
						}
						//这个就是走的路，下面有几个属性在app上不支持
						that.polyline = [{
							points: points,
							color: '#4C84FF',
							width: 5,
							arrowLine: true,
						}]
						// console.log('that', that.polyline)
					},
					fail: function(res) {
						console.log("获取路线失败", res);
					},
				});
			},
			openApp(item) {
				// console.log('end', this.end_latitude)
				uni.openLocation({
					latitude: this.end_latitude,
					longitude: this.end_longitude,
					name: this.shopName,
					address: this.address,
					complete: (com) => {
						console.log('open', com)
					}
				})
			},
			// 导航 会打开导航菜单供用户选择，都是打开内置地图
			openNavigation() {
				//方法1
				let longitude = this.end_longitude;
				let latitude = this.end_latitude;
				let name = '想要去的地方'
				let url = ""; // app url
				let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
				plus.nativeUI.actionSheet({
						//选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "高德地图"
						}], // 可选的地图类型
					},
					(e) => {
						// 判断用户选择的地图
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								// 安卓
								if (plus.os.name == "Android") {
									url =
										`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								} else {
									url =
										`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								}
								webUrl =
									`https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`;
								break;
						}
						// 如果选中
						if (url != "") {
							url = encodeURI(url);
							// 打开 app 导航
							plus.runtime.openURL(url, (err) => {
								// 失败回到
								// 如果失败则说明未安装 直接 打开网页版进行导航
								// 毕竟用户可能没有安装app但一定安装的有浏览器
								plus.runtime.openURL(webUrl);
							});
						}
					}
				);
			},
			// 关闭弹出层
			hideModal() {
				this.showModal = false;
			},
			//禁止父元素滑动
			moveHandle() {},
		}
	}
</script>

<style lang="scss">
	.container {

		.WANL-MODAL {

			.wanl-modal {
				padding-bottom: unset !important;
				min-height: 300rpx;
			}

			.map-list {
				min-height: 300rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				gap: 10rpx;
				padding: 60rpx 30rpx 30rpx;

				.item {
					width: 100%;
					background-color: #fcfcfc;
					padding: 30rpx 0;
					font-size: 28rpx;
					border-radius: 8rpx;
				}
			}
		}

		.map {
			width: 100%;
			height: 100vh;

			/* #ifdef H5 */
			height: calc(100vh - 88rpx) !important;
			/* #endif */
		}

		.content {
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
			position: fixed;
			bottom: 60rpx;
			left: 50%;
			z-index: 800;
			transform: translateX(-50%);
			width: 90%;
			background-color: white;
			border-radius: 16rpx;
			padding: 24rpx 34rpx;

			.title {
				font-size: 32rpx;
				font-weight: 400;
				margin-bottom: 18rpx;
			}

			.distance {
				font-size: 22rpx;
				color: #9C9C9C;
			}

			.addr {
				font-size: 24rpx;
				margin-bottom: 44rpx;
			}

			.navigation {
				background-color: #FD7601;
				height: 80rpx;
				width: 100%;
				color: white;
				border-radius: 802rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
			}

			.reLocation {
				background-color: #FD7601;
				width: 72rpx;
				height: 72rpx;
				border-radius: 8rpx;
				position: absolute;
				top: -100rpx;
				left: 0;
				padding: 16rpx;

				.img-bg {
					padding-top: 100%;
					background-size: cover !important;
				}
			}
		}
	}
</style>